<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <!--    引入格式文件-->
    <link rel="stylesheet" href="./注册.css">
    <script src="./注册.js"></script>
    <style>
        span {
            color: red;
            display: none;
        }
    </style>
</head>

<body>
    <div class="rg_layout"
        style="background: url(./u=60025854\,1475085559&fm=253&fmt=auto&app=120&f=JPEG.webp);background-size: 100%;">

        <div class="rg_left">
            <p>新用户注册</p>
            <p>USER REGISTER</p>
        </div>
        <div class="rg_center">
            <div class="rg_form">
                <form action="#" method="post">
                    <table>
                        <!-- //用户名 -->
                        <tr><!--label 标签的作用是当点击文字也会跳到文本输出框-->
                            <!--for属性与ID属性对应规定 label 绑定到哪个表单元素。-->
                            <td class="td_left"><label for="username">用户名</label> </td>
                            <td class="td_right"><input type="text" name="username" id="username"
                                    placeholder="请使用中文4~10个字符" class="first">
                                <span>用户名不能为空！</span>
                            </td>

                        </tr>

                        <tr>
                            <!-- //密码 -->
                            <td class="td_left"><label for="password">密码</label> </td>
                            <td class="td_right"><input type="text" name="password" id="password"
                                    placeholder="6~10个字符,含有大小写字母＋数字" class="user_password">
                                <span>请输入正确格式密码</span>
                            </td>
                        </tr>

                        <tr>
                            <td class="td_left"><label for="password">确认密码</label> </td>
                            <td class="td_right"><input type="password" name="password" id="password"
                                    placeholder="6~10个字符,含有大小写字母＋数字" class="third">
                                <span>确认密码不一致</span>
                            </td>
                            <!-- //确认密码 -->
                        </tr>
                        <!-- //邮箱 -->
                        <tr><!--label 标签的作用是当点击文字也会跳到文本输出框-->
                            <td class="td_left"><label for="email">email</label> </td>
                            <td class="td_right"><input type="email" name="email" id="email" placeholder="符合电子邮件格式"
                                    class="four">
                                <span>请输入正确格式邮箱</span>
                            </td>
                        </tr>

                        <tr>
                            <!-- 手机号 -->
                            <td class="td_left"><label for="tel">手机号</label> </td>
                            <td class="td_right"><input type="text" name="tel" id="tel" placeholder="11位数字组成"
                                    class="five">
                                <span>请输入正确格式的手机号!</span>
                            </td>
                        </tr>
                        <tr>
                            <!-- 手机号 -->
                            <td class="td_left"><label for="tel">图片</label> </td>
                            <td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入图片链接"
                                    class="six">
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
        </div>
        <div class="rg_right">
            请注册
            <button onclick="fun()" style="width: 100px;" class="end">注册</button>
        </div>
    </div>
    <!-- //JQuery引入 -->
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script>
        //开始用户名
        var user_name_Regxp = /^(?=.{8})(?=.*?[a-z])(?=.*?[A-Z])(?=.*?\d).*$/
        $(".first").on("blur", () => {
            if ($(".first").val() == "") {
                $(".first").next().show()
            } else {
                $(".first").next().hide()
            }
        })
    </script>
    <script>
        //开始密码
        var user_password_Regxp = /^(?=.{8})(?=.*?[a-z])(?=.*?[A-Z])(?=.*?\d).*$/
        $(".user_password").on("blur", () => {
            if (user_password_Regxp.test($(".user_password").val())) {
                $(".user_password").next().hide()
            } else {
                $(".user_password").next().show()
            }
        })
    </script>
    <script>
        //确认密码
        $(".third").on("blur", () => {
            if ($(".third").val() == $(".user_password").val()) {
                $(".third").next().hide()
            } else {
                $(".third").next().show()
            }
        })
    </script>
    <script>
        //邮箱
        var user_email_Regxp = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/
        $(".four").on("blur", () => {
            if (user_email_Regxp.test($(".four").val())) {
                $(".four").next().hide()
            } else {
                $(".four").next().show()
            }
        })
    </script>
    <script>
        //手机号
        var user_phone_Regxp = /^1[3456789]\d{9}$/;
        $(".five").on("blur", () => {
            if (user_phone_Regxp.test($(".five").val())) {
                $(".five").next().hide()
            } else {
                $(".five").next().show()
            }
        })
    </script>
    <script>
        //设置储存
        function fun() {
            localStorage.setItem("name", $(".first").val())
            localStorage.setItem("password", $(".user_password").val())
            localStorage.setItem("confirm", $(".third").val())
            localStorage.setItem("email", $(".four").val())
            localStorage.setItem("phone", $(".five").val())
            localStorage.setItem("img", $(".six").val())
            if ($(".first").val() == "") {
                alert("用户名不能为空")
            } else if (!user_password_Regxp.test($(".user_password").val())) {
                alert("密码格式有误")
            } else if ($(".third").val() != $(".user_password").val()) {
                alert("确认密码不一致")
            } else if (!user_email_Regxp.test($(".four").val())) {
                alert("邮箱格式有误")
            } else if (!user_phone_Regxp.test($(".five").val())) {
                alert("手机号格式有误")
            } else {
                location.assign("/登录/登录.html")
            }
        }
    </script>
</body>

</html>